<template>
  <div class="album-detail text-white bg-black">
    <div class="d-flex flex-wrap jc-center">
      <div class="album-cover w100 text-center mt-3 mb-2">
        <div @click="backToAlbum" class="position-f pl-4">
          <i class="iconfont" style="font-size: 1.6rem;">&#xe64f;</i>
        </div>
        <img :src="GET_ALBUM_DETAIL.picUrl" style="width: 240px;">
      </div>
      <div>
        <div class="album-name2 w100 text-l mt-2 mb-1 text-center">{{GET_ALBUM_DETAIL.name}}</div>
        <div class="album-name2-singer w100 text-center">
          <span>{{GET_ALBUM_DETAIL.artist.name}}</span>
        </div>
      </div>
      <div class="text-center mt-3 w100">
        <textarea cols="39" rows="4" class="bg-black text-white text-xxs"
        style="text-align: justify; border: none; overflow-y: scroll;">{{GET_ALBUM_DETAIL.description}}</textarea>
      </div>
      <div style="width: 260px;">
        <div class="w100 mt-5 mb-3 text-weight-6">热门歌曲</div>
        <SongsList :albumSongs="GET_ALBUM_SONG"></SongsList>
      </div>
    </div>

  </div>
</template>

<script>
  import { mapState, mapGetters } from 'vuex'
  import SongsList from '@/components/main/albumSongs/SongsList'
  export default {
    data() {
      return {}
    },
    methods: {
      backToAlbum() {
        this.$router.push('/album')
      }
    },
    computed: {
      ...mapGetters(['GET_ALBUM_DETAIL','GET_ALBUM_SONG']),
      ...mapState({
        obj: function(state) {
          return state.albumDetailList
        }
      })
    },
    components: {
      SongsList
    }
  }
</script>

<style scoped>
  .album-detail {
    min-height: 100%;
    position: absolute;
    top: 9.8em;
  }
  .album-cover img {
    box-shadow: 0px 0px 10px 3px rgba(255,255,255,0.5);
  }
  .album-name2 {
    letter-spacing: 1.5px;
  }
  .album-name2-singer {
    color: rgba(255,255,255,0.7);
  }
  .songindex{
    width: 1rem;
    display: inline-block;
  }
</style>
